<template>
	<!-- 设计优化 -->
	<div class="optimization">
		<!-- 头部 -->
		<div class="optimizationTop">
			<div class="optimization_logo">
				<img src="../../static/image/16557845140690910146.png" alt="">
			</div>
			<div class="optimization_title">
				<div class="title_left">设计优化订单</div>
				<div class="title_right">
					<div class="title_right-left" @click="infodiv">
						<div>
							<el-avatar size="small" :src="this.address"></el-avatar>
						</div>
						<div>{{this.username}}</div>
					</div>
					<div class="line"></div>
					<div class="loout" @click="lyout">退出</div>
				</div>
			</div>
			<div class="active">
				<img src="../../static/image/16557845125699707747.png" alt="">
			</div>
		</div>
		<!-- 左侧导航栏 -->
		<div class="left">
			<ul>
				<li class="activeLi">设计优化</li>
				<li @click="shenhe()">审核/合同签约</li>
				<li @click="shenheziliao()">结算审核资料</li>
				<li @click="mybaogao()">我的报告</li>
			</ul>

		</div>
		<ul class="leftIcon">
			<li class="activeIconLi">
				<img src="../../static/image/16557845125746053644.png" alt="">
			</li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<!-- 内容部分 -->
		<div class="content">
			<div class="con_information">
				<!-- 订单信息 -->
				<div class="con_information_top">
					<span>
						<img src="../../static/image/16557845125786128394.png" alt="">
					</span>
					<span>订单信息</span>
				</div>
				<div v-if="datalist.designType==''||datalist.designType==null">
					<el-empty description="无数据" :image-size="50"></el-empty>
				</div>
				<div class="con_information_text" v-else>
					<ul>
						<li>订单号：{{datalist.ordersNumber}}</li>
						<li>类型：{{datalist.designTypeName}}</li>
						<li>下单时间：{{datalist.ordersTime}}</li>
						<li>下单金额：<span style="color: rgb(254, 100, 26);">￥{{datalist.payableMoney}}.00</span></li>
						<li>备注：{{datalist.remark}}</li>
					</ul>
				</div>
			</div>
			<div class="con_Feedback">
				<!-- 资料审核意见反馈 -->
				<div class="con_information_top">
					<span>
						<img src="../../static/image/16557845125786128394.png" alt="">
					</span>
					<span>资料审核意见反馈</span>
				</div>
				<div v-if="this.datalist.opinions ==''">
					<el-empty description="无数据"></el-empty>
				</div>
				<div class="Feedback_list" v-else>
					<div class="" v-for="(item,i) in datalist.opinions">
						<span>{{item.opinionRemarks}}</span>
					</div>
				</div>
			</div>
			<div class="con_desc">
				<div class="desc_drawing">
					<div class="drawing_title">
						<div class="con_information_top">
							<span>
								<img src="../../static/image/16557845125786128394.png" alt="">
							</span>
							<span>设计图纸</span>
						</div>
						<div class="drawing_btn">
							<div @click="addUser()">参考模版</div>
							<!-- <div @click="submitUpload">+ 上传到服务器</div> -->
						</div>
					</div>
					<el-upload class="upload-demo" ref="upload2" :action="this.$api+'/app3/upload/uploadOneWithName'"
						 multiple :on-change="success2" :auto-upload="false" :show-file-list="false" :on-success="handleSU"
						:limit="3" :on-exceed="handleExceed"  :file-list="fileList" >
						<el-button size="small" type="primary">点击上传</el-button>
					</el-upload>
					<div class="drawing_Table">
						<el-table :data="tableData" stripe style="width: 100%">
							<el-table-column prop="fullName" label="文件名称" >
							</el-table-column>
							<el-table-column label="操作" width="120">
								<template slot-scope="scope">
									<el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text"
										size="small">
										删除
									</el-button>
									<el-button @click.native.prevent="download(scope.$index, tableDataXQ)" type="text"
										size="small">
										下载
									</el-button>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
				<div class="desc_demand">
					<!-- 需求说明 -->
					<div class="drawing_title">
						<div class="con_information_top">
							<span>
								<img src="../../static/image/16557845125786128394.png" alt="">
							</span>
							<span>设计需求说明</span>
						</div>
						<div class="drawing_btn">
							<div @click="addUser()">参考模版</div>
						</div>
					</div>
					<el-upload class="upload-demo" ref="upload" :action="this.$api+'/app3/upload/uploadOneWithName'"
						 multiple :on-change="success" :auto-upload="false" :show-file-list="false" :on-success="handleSU2"
						:limit="3" :on-exceed="handleExceed"  :file-list="fileListSG" >
						<el-button size="small" type="primary">点击上传</el-button>
					</el-upload>
					<div class="drawing_Table">
						<el-table :data="tableDataXQ" stripe style="width: 100%">
							<el-table-column prop="fullName" label="文件名称" >
							</el-table-column>
							<el-table-column label="操作" width="120">
								<template slot-scope="scope">
									<el-button @click.native.prevent="deleteRow2(scope.$index, tableDataXQ)" type="text"
										size="small">
										删除
									</el-button>
									<el-button @click.native.prevent="download2(scope.$index, tableDataXQ)" type="text"
										size="small">
										下载
									</el-button>
								</template>
							</el-table-column>
						</el-table>
						<div class="text_84">注：您可上传.doc ,.pdf,rp,等。</div>
					</div>
				</div>
			</div>
			
			<el-dialog title="参考模版" :visible.sync="dialogTableVisible2" center :append-to-body='true'
				:lock-scroll="false" width="50%">
				<Add></Add>
				<div>
					这是参考模版文章详情，这是参考模版文章详情，这是参考模版文章详情，这是参考模版文章详情，这是参考模版文章详情，这是参考模版文章详情，
				</div>
				<div class="img_6">
					<img src="../../static/image/9702fce0461b8131ecc27562ecf713de.png" alt="">
					<img src="../../static/image/4567115e2b6c5cf3d670612d955208e2.png" alt="">
				</div>
			</el-dialog>
			<div class="con_btn">
				<!-- 按钮 -->
				<div class="cencel">取消</div>
				<div class="submit" @click="sure">确认</div>
			</div>
			<el-dialog title="" :visible.sync="dialogTableVisible" center :append-to-body='true' :lock-scroll="false"
				width="40%">
				<div class="info">
					<div class="infopic">
						<img :src="this.address" alt="" alt="">
					</div>
					<div class="name" style="margin-top: 10px;color: #333;">{{this.username}}</div>
				</div>
				<div class="img_6">
					<div @click="ZHinfo">
						<el-dropdown-item style="color: #1C62F9;">账号信息</el-dropdown-item>
					</div>
					<div @click="switchome">
						<el-dropdown-item style="color: #fff;">切换房屋</el-dropdown-item>
					</div>
				</div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'optimization',
		data() {
			return {
				tableData: [],
				tableDataXQ:[],
				dialogTableVisible2:false,
				dialogTableVisible: false,
				address: '',
				username: '',
				datalist: '',
				fileList: [],
				fileListSG:[],
				fileList3:[],
				newfileList:[],
				newfileList2:[],
				newfileList3:[]
			}
		},
		beforeCreate() {
			document.querySelector('body').setAttribute('style', 'background-color:#f6f7f9')
		},
		beforeDestroy() {
			document.querySelector('body').removeAttribute('style')
		},
		created() {
			this.address = localStorage.getItem('address');
			this.username = localStorage.getItem('name');
			this.getdata()
		},
		methods: {
			download(index,item){
				// console.log(index,'index')
				// console.log(item,'item')
				// tableDataXQ
				let url = item[index].path;
				if(url == '' ||url == null){
					this.$message({
					  type: 'info',
					  message: '下载失败'
					});
					return;
				}
				window.open(url)
			},
			download2(index,item){
				// console.log(index,'index')
				// console.log(item,'item')
				// tableDataXQ
				let url = item[index].path;
				if(url == '' ||url == null){
					this.$message({
					  type: 'info',
					  message: '下载失败'
					});
					return;
				}
				window.open(url)
			},
			addUser() {
				this.dialogTableVisible2 = true; //默认页面不显示为false,点击按钮将这个属性变成true
			},
			sure(){
				let design={
					designId:this.datalist.designId,
					orderId:this.datalist.ordersId,
					designDrawings:this.newfileList,
					designIllustrates:this.newfileList2
				}
				// 确定
				this.$axios({
					method: 'post',
					url: this.$api+'/app2/design/saveOrderFile',
					data: design,
					headers: {
						token: localStorage.getItem('token')
					}
				}).then(res => {
					if (res.data.code == 200) {
						this.$message({
						  type: 'info',
						  message: '上传成功'
						});
						this.getdata()
					} else {
						 this.$message({
						  type: 'info',
						  message: res.msg
						});
					}
				})
			},
			handleSU(res){
				this.newfileList.push(res.data)
			},
			handle3(res){
				this.newfileList3.push(res.data)
			},
			handleSU2(res){
				this.newfileList2.push(res.data)
			},
			success3(file, fileList){
				this.$refs.upload3.submit();
				this.$message({
				  type: 'success',
				  message: '上传成功'
				});
			},
			success2(file, fileList){
				this.$refs.upload2.submit();
				this.$message({
				  type: 'success',
				  message: '上传成功'
				});
			},
			success(file, fileList){
				this.$refs.upload.submit();
				this.$message({
				  type: 'success',
				  message: '上传成功'
				});
			},
			handleExceed(files, fileList) {
				this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
			},
			// 删除
			deleteRow(index,table){
				// console.log(index,'index')
				// console.log(table,'table')
				this.$axios({
					method: 'post',
					url: this.$api + '/app2/design/delFile',
					data: {
						delType:'1',
						fileId:this.tableDataXQ[index].id,
						designId:this.datalist.designId
					},
					headers: {
						token: localStorage.getItem('token')
					}
				}).then(res => {
					if (res.data.code == 200) {
						this.$message({
						  type: 'success',
						  message: '删除成功'
						});
						this.getdata()
					} else {
						this.$message({
							type: 'info',
							message: res.data.msg
						});
					}
				})
			},
			deleteRow2(index,table){
				// console.log(this.tableDataXQ[index],'index')
				this.$axios({
					method: 'post',
					url: this.$api + '/app2/design/delFile',
					data: {
						delType:'2',
						fileId:this.tableDataXQ[index].id,
						designId:this.datalist.designId
					},
					headers: {
						token: localStorage.getItem('token')
					}
				}).then(res => {
					if (res.data.code == 200) {
						this.$message({
						  type: 'success',
						  message: '删除成功'
						});
						this.getdata()
					} else {
						this.$message({
							type: 'info',
							message: res.data.msg
						});
					}
				})
			},
			getdata() {
				// 设计优化获取
				this.$axios({
					method: 'post',
					url: this.$api + '/app2/design/queryOrder',
					data: {},
					headers: {
						token: localStorage.getItem('token')
					}
				}).then(res => {
					console.log(res.data,'asduhasda')
					if (res.data.code == 200) {
						this.datalist = res.data.data;
						this.tableDataXQ=res.data.data.designIllustrates;
						this.tableData=res.data.data.designDrawings;
					} else {
						this.$message({
							type: 'info',
							message: res.data.msg
						});
					}
				})
			},
			switchome() {
				this.$router.push({
					path: '/switchome'
				})
				this.dialogTableVisible = false;
			},
			ZHinfo() {
				this.$router.push({
					path: '/ZHinfo'
				}) // 带
				this.dialogTableVisible = false;
			},
			infodiv() {
				this.dialogTableVisible = true;
			},
			shenhe() {
				this.$router.push('/examine')
			},
			shenheziliao() {
				this.$router.push('/settlement')
			},
			mybaogao() {
				this.$router.push('/report')
			},
			getinfo() {

			},
			lyout() {
				// 推出
				this.$axios({
					method: 'post',
					url: this.$api +'/app3/consumer/quit',
					data: {},
					headers: {
						token: localStorage.getItem('token')
					}
				}).then(res => {
					if (res.data.code == 200) {
						this.$message({
							type: 'info',
							message: res.msg
						});
						var storage = window.localStorage;
						storage.clear();
						this.$router.push('/')
					} else {
						var storage = window.localStorage;
						storage.clear();
						this.$router.push('/')

					}

					console.log(res)
				})
			}
		}
	}
</script>


<style scoped>
	.info {}

	.info .name {
		text-align: center;
		line-height: 30px;
		font-size: 14px;
	}

	.infopic {
		width: 30%;
		margin: 0 auto;
	}

	.infopic img {
		width: 100px;
		height: 100px;
		border-radius: 50%;
		margin-left: 30%;
		z-index: -1;
	}

	.infopic div {
		background-color: #1C62F9;
		border-radius: 18px;
		width: 80px;
		height: 20px;
		color: #fff;
		text-align: center;
		position: absolute;
		top: 43%;
		left: 43%;
	}

	.img_6 {
		display: flex;
		justify-content: space-around;
		border-top: 1px solid #eee;
		padding-top: 20px;
	}

	.img_6 div {
		width: 30%;

	}

	.img_6 div:first-child {
		border: 1px solid #1C62F9;
		border-radius: 18px;

		text-align: center;
	}

	.img_6 div:last-child {
		background-color: #1C62F9;
		border-radius: 18px;
		color: #fff;
		text-align: center;
	}

	.text_info {
		width: 100px;
		height: 80px;
		border: 1px solid red;
	}

	ul li {
		list-style: none;
		color: #fff;
		padding: 0;
		margin: 0;
	}

	.optimizationTop {
		width: 100%;
		height: 36px;
		background-color: rgba(29, 106, 255, 1);
		position: absolute;
		left: 0;
		top: 0;
		z-index: 10;
		display: flex;

	}

	.el-button--text {
		color: #333 !important;
	}

	.optimization_logo {
		width: 55px;
		height: 20px;
		margin-top: 6px;
		margin-left: 30px;
	}

	.optimization_logo img {
		width: 100%;
		height: 100%;
	}

	.optimization_title {
		width: 89%;
		color: #fff;
		margin-left: 2.8%;
		display: flex;
		line-height: 36px;
		justify-content: space-between;
	}

	.title_left {
		width: 20%;
		font-size: 14px;
		text-align: center;
	}

	.title_right-left {
		display: flex;
		font-size: 14px;
		/* width: 60px; */
		justify-content: space-between;
	}

	.el-avatar--small {
		margin-top: 10%;
		margin-right: 5px;
	}

	.title_right {
		display: flex;
		font-size: 14px;
	}

	.line {
		width: 1px;
		height: 10px;
		background-color: #fff;
		margin-top: 13px;
		margin-left: 20px;
	}

	.loout {
		width: 70px;
		text-align: center;
	}

	.active {
		position: absolute;
		top: 21px;
		left: 15%;
		width: 50px;
		height: 3px;
	}

	.active img {
		width: 100%;
		height: 100%;
	}

	/*  */
	.left {
		position: absolute;
		left: 0;
		top: 0;
		width: 120px;
		height: 100%;
		background-color: rgb(0, 14, 38);
		z-index: 9;
	}

	.left ul {
		margin-top: 55px;
		padding-left: 0;
		text-align: center;
	}

	.left ul li {
		text-align: center;
		font-size: 14px;
		height: 40px;
		line-height: 40px;
	}

	.activeLi {
		background-color: rgb(7, 36, 90);
	}

	.leftIcon {
		position: absolute;
		top: 5.5%;
		left: -39px;
	}

	.activeIconLi {
		width: 5px;
		height: 20px;
	}

	.activeIconLi img {
		width: 100%;
		height: 100%;
	}

	/*  */
	.content {
		width: 90%;
		height: 85%;
		position: absolute;
		top: 7%;
		left: 8%;
	}

	.con_information {
		background-color: #fff;
		width: 99%;
		padding: 10px;
		border-radius: 8px;
	}

	.con_information_top {
		font-size: 18px;
		margin-top: 10px;
	}

	.con_information_top span:first-child {
		width: 20px;
		height: 20px;
	}
	
	.con_information_top img {
		width: 18px;
		height: 10px;
	}

	.con_information_text {
		margin-top: 15px;
	}

	.con_information_text ul {
		display: flex;
		padding-left: 12px;
	}

	.con_information_text ul li {
		list-style: none;
		width: 30%;
		color: #333;
		font-size: 15px;
	}

	.con_Feedback {
		padding: 10px;
		margin-top: 20px;
		background-color: #fff;
		border-radius: 8px;
	}

	.Feedback_list {
		width: 97%;
		margin: 0 auto;
		border: 1px solid rgb(29, 1.6, 255);
		border-radius: 8px;
		height: 80px;
		margin-top: 20px;
		background-color: rgb(244, 247, 255);
		font-size: 12px;
		padding: 0 10px;
	}

	.Feedback_list div {
		height: 40px;
		line-height: 40px;
	}

	.Feedback_list div {
		border-bottom: 1px solid #1d6aff1f;
	}

	.Feedback_list span {
		color: rgb(29, 106, 255);
	}

	.con_desc {
		display: flex;
		justify-content: space-between;
		margin-top: 15px;
	}

	.desc_drawing {
		width: 48%;
		background-color: #fff;
		padding: 0 10px;
	}

	.drawing_title {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.desc_demand {
		width: 48%;
		background-color: #fff;
		padding: 0 10px;
	}

	.drawing_btn {
		display: flex;
		margin-top: 10px;
	}

	.drawing_btn div {
		/* width: 80px; */
		padding: 0 10px;
		height: 30px;
		border: 1px solid #eee;
		font-size: 14px;
		text-align: center;
		line-height: 30px;
		border-radius: 4px;
	}

	.drawing_btn div:first-child {
		background-color: rgb(244, 247, 255);
		color: rgb(29, 106, 255);
		margin-right: 15px;
	}

	.drawing_btn div:last-child {
		background-color: #1c62f9;
		color: #fff;
	}

	.drawing_Table {
		width: 90%;
		margin: 0 auto;
	}

	.text_84 {
		color: #ff371d;
		font-size: 0.75rem;
		font-family: '.AppleSystemUIFont';
		height: 40px;
		line-height: 40px;
	}

	.con_btn {
		display: flex;
		justify-content: space-between;
		width: 40%;
		margin: 0 auto;
		margin-top: 50px;
		font-size: 1rem;
	}

	.cencel {
		width: 250px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		border-radius: 38px;
		border: 1px solid #eee;
		background-color: #fff;
	}

	.submit {
		width: 250px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		border-radius: 38px;
		background-color: #1d6aff;
		color: #fff;
	}
</style>
